<template>
  <div>
    <div class="login">
      <div class="box">
        <h3>用户登录</h3>
        <div class="myuser">
          <span class="iconfont icon-icon-12"></span>
          <input
            type="text"
            name="user"
            id="user"
            placeholder="用户名"
            v-model="user"
            autofocus="autofocus"
            autocomplete="off"
          />
        </div>
        <div class="mypass">
          <span class="iconfont icon-icon--1"></span>
          <input
            type="password"
            name="pass"
            id="pass"
            placeholder="密码"
            v-model="pass"
            @keydown.enter="loginFn"
          />
        </div>
        <div class="mysend" @click="loginFn">登录</div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getCaptcha, getCaptchaVerify } from "../api/login.js";
import { Notify } from "vant";
export default {
  data() {
    return {
      user: "",
      pass: "",
    };
  },
  methods: {
    loginFn() {
      // 验证手机
      let reguser = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      // 验证密码 以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
      let regpass = /^[a-zA-Z]\w{5,17}$/;
      //初步格式正确
      if (reguser.test(this.user) && regpass.test(this.pass)) {
        // 处理 api 暂时不处理
        if (this.pass == "admin123" && this.user == 15119516083) {
          console.log(this.$store.state);
          // this.$store.state.loginflag = true; // 可以直接改vuex的值
          this.$store.commit("setLogin", true);
          // 跳转页面
          this.$router.push({
            path: "/recommend",
          });
          Notify({ type: "success", message: "登录成功" });
        } else {
          // 账号密码错误
          Notify({ type: "danger", message: "登录失败" });
        }
        // this.user = this.pass = "";
      } else {
        Notify({ type: "warning", message: "请输入正确格式" });
      }
    },
  },
  created() {
    this.$store.state.playflag = false;
  },
};
</script>

<style lang="less" scoped>
.login {
  position: relative;
  z-index: 9;
  // background: linear-gradient(
  //   45deg,
  //   rgba(254, 172, 94, 0.5),
  //   rgba(199, 121, 208, 0.5),
  //   rgba(75, 192, 200, 0.5)
  // );
  background-color: rgba(135, 207, 235, 0.5);
  height: 100vh;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    border: 1px solid rgba(0, 0, 0, 0.438);
    padding: 0 15px;
    border-radius: 15px;
    h3 {
      font-size: 6vw;
      color: rgba(255, 255, 255, 0.9);
      font-weight: normal;
      text-align: center;
    }
    & > div {
      margin: 20px 0;
      display: flex;
      height: 46px;
      line-height: 46px;
      // background-color: skyblue;
      box-shadow: 0 0px 2px 0px black inset;
      input {
        border: none;
        outline: none;
        width: 100%;
        height: 100%;
        background-color: transparent;
        &::-webkit-input-placeholder {
          font-size: 4vw;
        }
        font-size: 4vw;
      }
      span {
        flex: 0 0 46px;
        line-height: 46px;
        text-align: center;
      }
    }
    .mysend {
      font-size: 5vw;
      display: block;
      text-align: center;
      box-shadow: 0px 0px 4px 0px black inset;
      margin: 25px 0;
    }
  }
}
</style>

